<template>
    <div>
        <div class="table-div">
            <!-- 表格头部面板 -->
            <div class="table-panel">
                <!-- 
                @keyup.native ---- 键盘松开事件
				@keyup.enter.native ---- 回车事件
             -->
                <el-input v-model="search.keyword" placeholder="关键字查询" class="filter-item"
                    @keyup.enter.native="initTableData" @keyup.native="initTableData" />
                <el-button class="button-item" type="primary" icon="el-icon-edit" @click="addModel()">新增</el-button>
            </div>

            <!-- 
            表格
            @row-click ---- 行点击事件
			@select-all ---- 全选事件
			@select ---- 选择事件
            :default-sort="{ prop: 'id', order: 'descending' }"
        -->
            <el-table ref="list" :data="tableData.list" style="width: 100%; margin-top: 10px" border stripe
                highlight-current-row @sort-change="changeSort">
                <!-- 
                sortable ---- 未开启后台分页时使用
                sortable="custom" ---- 开启后台分页时使用，table 中用 sort-change 监听排序点击事件
            -->
                <el-table-column property="houseId" label="房屋编号" width="80" align="center" sortable="custom">
                </el-table-column>
                <el-table-column property="monthlyRent" label="月租金" width="120" align="center" sortable="custom">
                </el-table-column>
                <el-table-column property="startDate" label="起租时间" width="220" align="center" sortable="custom">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 5px">{{ scope.row.startDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="endDate" label="结租时间" width="220" align="center" sortable="custom">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 5px">{{ scope.row.endDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="totalRent" label="总租金" width="180" align="center" sortable="custom">
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button circle icon="el-icon-check" type="primary" title="提交订单" size="small"
                            @click="buyModel(scope.row)"></el-button>
                        <el-button circle icon="el-icon-star-off"  title="取消收藏" size="small"
                            @click="deleteModel(scope.row)"></el-button>
                        <el-button circle icon="el-icon-edit-outline"  title="修改日期" size="small"
                            @click="editModel(scope.row)"></el-button>    
                    </template>
                </el-table-column>
            </el-table>

            <!-- 
            分页
            :tableData ---- 将 tableData 作为参数传递给子组件 Pagination
            @emitPageData ---- 子组件 $emit 函数定义的 key
            receivePageData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
        -->
            <Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>

            <!-- 
			Model 编辑弹出窗
			:dialogData ---- 將 dialogData 作为参数传递给子组件 userEdit.vue
			@emitDialogData ---- 子组件 $emit 函数定义的 key
			receiveDialogData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
		-->
            <FavoritesEdit :dialogData="dialogData" @emitDialogData="receiveDialogData"></FavoritesEdit>
            <FavoritesEdit2 :dialogData="dialogData" @emitDialogData="receiveDialogData2"></FavoritesEdit2>
        </div>
    </div>
</template>
<script>
import Pagination from "../fragments/Pagination.vue";
import FavoritesEdit from "@/components/accounts/FavoritesEdit.vue";
import FavoritesEdit2 from "@/components/accounts/FavoritesEdit2.vue";
export default {
    name: "Favorites",
    data() {
        return {
            // 表格数据结构
            tableData: {
                pageNum: 1,
                pageSize: 5,
                total: 36,
                list: this.$TestData.usersData, // 当前页数据集合
            },
            // 查询参数
            search: {
                currentPage: 1,
                pageSize: 5,
                keyword: "",
                sort: "house_id",
                direction: "desc",
            },
            // 是否显示 loading
            downloadLoading: false,
            // 编辑窗口数据
            dialogData: {
                id: 0,
                // 是否显示编辑窗口
                showEditDialog: false,
                showEditDialog2: false,
            },
        };
    },
    components: { Pagination, FavoritesEdit, FavoritesEdit2},
    methods: {
        // 初始化表单数据
        initTableData: function () {
            var self = this;
            $.ajax({
                url: "http://127.0.0.1:8000/api/shoppingcar/houses",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(self.search),
                success: function (rs) {
                    self.tableData = rs;
                },
                error: function (data) {
                    // TODO
                },
            });
            // this.$Request
            // 	.fetch_("/api/shoppingcar/houses", "post", self.search)
            // 	.then((result) => {
            // 		self.tableData = result;
            // 	})
            // 	.catch((error) => {
            // 		console.log(error);
            // 	});
        },
        // 排序
        changeSort: function (obj) {
            this.search.sort = this.$Common.camecaseToLine(obj.prop);
            this.search.direction = obj.order == "descending" ? "desc" : "asc";
            this.initTableData();
        },
        // 接收子子组件数据的函数
        receivePageData: function (tableData) {
            this.search.currentPage = tableData.pageNum;
            this.search.pageSize = tableData.pageSize;
            this.initTableData();
        },
        // 接收表单数据
        receiveDialogData: function (showEditDialog) {
            this.dialogData.showEditDialog = showEditDialog;
            this.initTableData();
        },
        receiveDialogData2: function (showEditDialog2) {
            this.dialogData.showEditDialog2 = showEditDialog2;
            this.initTableData();
        },
        // receiveDialogData2: function (showEditDialog2) {
        //     this.dialogData.showEditDialog2 = showEditDialog2;
        //     this.initTableData();
        // },
        // 新增 model
        addModel: function () {
            this.dialogData = {
                id: 0,
                showEditDialog: true,
            };
        },
        // 编辑 model
		editModel: function (row) {
            console.log("1");
			this.dialogData = {
				id: "1",
                houseId:row.houseId,
                monthlyRent:row.monthlyRent,
				showEditDialog2: true,
			};
            console.log(this.dialogData);
		},
        // 编辑 model
		// buyModel: function (row) {
		// 	this.dialogData = {
		// 		id: row.houseId,
		// 		showEditDialog2: true,
		// 	};
		// },
        // 删除 model
        deleteModel: function (row) {
            this.$confirm("确定要取消收藏当前房源吗？", "确定", {
                comfirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    var self = this;
                    $.ajax({
                        url: "http://127.0.0.1:8000/api/shoppingcar/house/" + row.houseId,
                        type: "delete",
                        success: function (rs) {
                            if (rs.status == 200) {
                                self.initTableData();
                            } else {
                                self.$message.info(rs.message);
                            }
                        },
                        error: function (data) {
                            // TODO
                        },
                    });
                    // var url = "/api/house/" + row.houseId;
                    // this.$Request
                    // 	.fetch_(url, "delete", {})
                    // 	.then((result) => {
                    // 		if (result.status == this.$Request.OK_CODE) {
                    // 			this.$message({
                    // 				message: "删除成功",
                    // 				type: "success",
                    // 				duration: 2 * 1000,
                    // 			});
                    // 			this.search.currentPage = 1;
                    // 			this.initTableData();
                    // 		} else {
                    // 			this.$message.error(result.message);
                    // 		}
                    // 	})
                    // 	.catch(() => {});
                })
                .catch(() => { });
        },
    },
    mounted() {
        this.initTableData();
    },

};


</script>
<style>
.table-div {
    margin-top: 10px;
}

.filter-item {
    float: right;
    width: 200px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    /* margin-right: 5px; */
}

.button-item {
    float: left;
    width: 100px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 5px;
}
</style>

